<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>

<!--样式-->
<style>
    /* 设置头部布局的样式*/
    .el-header {
        background-color: #66b1ff;
        color: #333;
        child-align: left;
        line-height: 10px;
    }

    /* 设置主体布局的样式*/
    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 110px;
        align-content: center;
    }
</style>

<body>

<div id="app" style="align-content: center">

    <el-container>
        <!--           使用ElementUI的el-header 设置头部区域-->
        <el-header>
                                            <!--添加弹框-->
            <!--<el-button type="primary" @click="handlerAddFlag">添加</el-button>-->
            <div>
                <el-upload action="/book/upload"
                           name="file"
                           :show-file-list="false"
                           :on-success="handleSuccess">
                    <el-button type="primary">上传文件</el-button>
                </el-upload>
            </div>
        </el-header>
        <el-main>
            <template>
                <el-table :data="List" style="width: 100%">
                    <el-table-column label="编号" width="190" prop="id"></el-table-column>
                    <el-table-column label="姓名" width="190" prop="bname"></el-table-column>
                    <el-table-column label="价钱" width="190" prop="price"></el-table-column>
                    <el-table-column label="描述" width="180" prop="description"></el-table-column>
                    <el-table-column label="类别" align="center">
                        <template slot-scope="scope"><span v-for="category in categoryList" v-if="scope.row.cid ==category.cid ">{{category.cname}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.row)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </template>
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout=" prev, pager, next"
                    :total="pagination.total">
            </el-pagination>

        </el-main>

        <!-- ==============================添加弹框 开始 ========================================-->
        <!--<el-dialog title="添加学生信息" :visible.sync="addFlag" width="30%">

            <el-form :model="books" :rules="rules" ref="stuFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="员工姓名" prop="name">
                    <el-input v-model="books.name"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="books.price"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="books.description"></el-input>
                </el-form-item>
                <el-form-item label="类别" prop="cid">
                    <el-select v-model="books.cid">
                        <el-option v-for="category in categoryList" :label="category.cname" :value="category.cid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>                      &lt;!&ndash;添加方法&ndash;&gt;
                    <el-button type="primary" @click="addStudent('stusForm')">添加</el-button>
                    <el-button type="default" @click="addFlag=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>-->
        <!-- ======================================添加结束===============================================-->


        <!--======================================= 修改 ================================================-->
                                                <!--修改弹框-->
        <el-dialog title="修改学生信息" :visible.sync="EditFlag" width="30%">

            <el-form :model="books" :rules="rules" ref="stuFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="书名" prop="bname">
                    <el-input v-model="books.bname"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="books.price"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="books.description"></el-input>
                </el-form-item>
                <el-form-item label="类别" prop="cid">
                    <el-select v-model="books.cid">
                        <el-option v-for="category in categoryList" :label="category.cname" :value="category.cid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>                      <!--修改方法-->
                    <el-button type="primary" @click="EditStudent('stusForm')">修改</el-button>
                    <el-button type="default" @click="EditFlag=false">取消</el-button>
                </el-form-item>                     <!--修改弹框-->
            </el-form>
        </el-dialog>
        <!--================================================修改结束================================================-->

    </el-container>

</div>

</body>
</html>

<script>

    let app = new Vue({
        el: "#app",
        data: {
            //分页对象
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 5,//每页显示的记录数
                total: 0,//总记录数
                queryString: null//查询条件
            },
            //添加弹框
            addFlag: false,
            //修改弹框
            EditFlag: false,
            //表单数据
            books: {},
            //学生数组
            List: [],
            //专业数组
            categoryList: [],
            //表单校验
            rules: {
                bname: [
                    {required: true, message: '请输入书名', trigger: 'blur'},
                ]
            }
        },

        //钩子函数
        created() {
            this.findPage();
            this.findAll();
        },
        methods: {
		handleSuccess(res,file){
                if (res.flag){
                    this.$message({
                        type:"success",
                        message:res.message
                    })
                }else {
                    this.$message.error(res.message)
                }
                console.log(res,file);
            },
            //专业显示
            findAll() {
                axios.post("/category/findAll").then(res=>{
                    this.categoryList=res.data;
                })
            },
            //分页
            findPage() {
                let that = this;
                axios.post("/book/findPage",that.pagination).then(res=>{
                        that.pagination.total=res.data.total;
                        that.List=res.data.rows;
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage=currentPage;
                this.findPage()
            },
            //回显
            handleEdit(row) {
                axios.post("/book/findById?id="+row.id).then(res=>{
                    this.books=res.data
                })
                this.EditFlag=true;
            },
            //修改
            EditStudent() {
                let that = this;
                axios.post("/book/update",that.books).then(res=>{
                    let that = this;
                    if (res.data.flag){
                        that.$message({
                            type:"success",
                            message:res.data.message
                        })
                        this.EditFlag=false;
                        this.findPage()
                    }else {
                        that.$message.error(res.data.message)
                    }
                    this.resetForm();
                })
            },
            //删除
            handleDelete(row) {
                this.$confirm('此操作将永久删除该学员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/book/del?id="+row.id).then(res=>{
                        let that = this;
                        if (res.data.flag){
                            that.$message({
                                type:"success",
                                message:res.data.message
                            })
                        }else {
                            that.$message.error(res.data.message)
                        }
                        that.findPage()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //重置表单
            resetForm() {
                this.books = {}
            }
        }
    });

</script>